<template>
  <div class="infinite-container">
    <mu-flexbox class="bgwhite setting-nav">
      <mu-flexbox-item @click.native="go('/appointment/select-department')">
        <i class="iconfont icon-rili"></i>
        <div>预约挂号</div>
      </mu-flexbox-item>
      <mu-flexbox-item @click.native="go('/setting/bind-visitcard')">
        <i class="iconfont icon-paidui1 color-blue"></i>
        <div>排队叫号</div>
      </mu-flexbox-item>
      <mu-flexbox-item @click.native="go('/setting/family')">
        <i class="iconfont icon-zhifu color-oringe"></i>
        <div>诊间支付</div>
      </mu-flexbox-item>
    </mu-flexbox>
    <mu-divider/>
     <mu-flexbox class="bgwhite setting-nav">
      <mu-flexbox-item @click.native="go('/setting/improve-user-info')">
        <i class="iconfont icon-chaxun1 color-oringe"></i>
        <div>报告查询</div>
      </mu-flexbox-item>
      <mu-flexbox-item @click.native="go('/setting/bind-visitcard')">
        <i class="iconfont icon-chaxunmobansheji" ></i>
        <div>检查预约查询</div>
      </mu-flexbox-item>
      <mu-flexbox-item @click.native="go('/setting/family')">
        <i class="iconfont icon-feiyongluru_intouch color-blue"></i>
        <div>门诊费用</div>
      </mu-flexbox-item>
    </mu-flexbox>
  </div>
</template>

<script>
export default {
  methods: {
    go (url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';

.setting-nav {
  text-align: center;
  padding: 1em 0 2em;
  .iconfont {
    font-size: 2.5em;
    color: @color-primary;
    &.color-blue {
      color: @color-blue;
    }
    &.color-oringe{
      color: @color-price;
    }
  }
}
</style>
